<template>
  <div class="tabs-view">
    <a-tabs
      size="small"
      v-if="panes.length !== 0"
      @change="changePage"
      v-model="activeKey"
      hide-add
      type="editable-card"
      @edit="onEdit"
    >
      <template v-for="(pane, index) in panes" :tab="pane.title">
        <a-tab-pane :key="pane.fullPath" :closable="pane.closable">
          <template #tab>
            <a-dropdown :trigger="['contextmenu']">
              <div style="display: inline-block">
                {{ pane.title }}
              </div>
              <template v-slot:overlay>
                <a-menu style="user-select: none">
                  <!-- <a-menu-item @click="reloadPage(pane)" :disabled="activeKey !== pane.fullPath" key="1">
                    <a-icon type="reload" />
                    刷新
                  </a-menu-item> -->
                  <a-menu-item @click="removeTab(pane, index)" key="2" v-if="pane.closable != false">
                    <a-icon type="close" />
                    关闭
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item @click="closeLeft(pane, index)" key="3">
                    <a-icon type="vertical-right" />
                    关闭左侧
                  </a-menu-item>
                  <a-menu-item @click="closeRight(pane, index)" key="4">
                    <a-icon type="vertical-left" />
                    关闭右侧
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item @click="closeOther(pane, index)" key="5">
                    <a-icon type="column-width" />
                    关闭其他
                  </a-menu-item>
                  <a-menu-item @click="closeAll" key="6">
                    <a-icon type="minus" />
                    关闭全部
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </a-tab-pane>
      </template>
    </a-tabs>
  </div>
</template>

<script>
const defaultPans = [
  {
    title: '工作台',
    key: '/dashboard/workplace',
    fullPath: '/dashboard/workplace',
    closable: false,
  },
]
import { mapGetters } from 'vuex'
const defaultPath = '/dashboard/workplace'
export default {
  name: 'TabsView',
  computed: {
    ...mapGetters(['panes', 'panesA']),
  },
  data() {
    return {
      activeKey: '',
      newTabIndex: 0,
    }
  },
  activated() {
    // this.activeKey = this.panes[0].key
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route: {
      handler: function (val, oldVal) {
        const title = val.meta.title
        const fullPath = val.fullPath
        const routerObj = Object.assign({
          title: title,
          fullPath: fullPath,
          key: fullPath,
        })
        var arrt = JSON.parse(JSON.stringify(this.panes))
        // 先判断标签路由中是否已经存在相同的,如果存在相同的跳转后不push
        let flag = true
        arrt.forEach((item) => {
          if (item.fullPath === fullPath) {
            flag = false
          }
        })
        if (flag) {
          arrt.push(routerObj)
        }
        this.$store.commit('setpanesUrl', arrt)
        // console.log(fullPath)
        this.activeKey = fullPath
        this.clearKeepAlive()
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
    panesA() {
      if (!this.panesA) {
        this.$store.commit('setpanes', true)
        this.closeAll()
      }
    },
  },
  methods: {
    remove(targetKey) {
      var arrt = JSON.parse(JSON.stringify(this.panes))
      let index = -1
      arrt.forEach((pane, i) => {
        if (pane.key === targetKey) {
          index = i
        }
      })
      if (index !== -1) {
        arrt.splice(index, 1)
        if (arrt.length === 0) {
          arrt = JSON.parse(JSON.stringify(defaultPans))
          this.$router.push({
            path: defaultPath,
          })
        }
        const prevItem = this.panes[index - 1]
        if (prevItem) {
          this.activeKey = prevItem.fullPath
          this.$router.push({
            path: prevItem.fullPath,
          })
        }
        const nextItem = this.panes[index + 1]
        if (nextItem) {
          this.activeKey = nextItem.fullPath
          this.$router.push({
            path: nextItem.fullPath,
          })
        }
      }
      this.$store.commit('setpanesUrl', arrt)
      this.clearKeepAlive()
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    changePage(key) {
      this.activeKey = key
      this.$router.push({
        path: key,
      })
    },
    // 刷新页面
    // reloadPage(pane) {
    //   this.$emit('reload')
    // },
    // 关闭当前
    removeTab(pane, index) {
      var arrt = JSON.parse(JSON.stringify(this.panes))
      // 判断如果当前是最后一个元素了,就跳转到工作台
      arrt.splice(index, 1)
      if (arrt.length === 0) {
        arrt = JSON.parse(JSON.stringify(defaultPans))
        this.$router.push({
          path: defaultPath,
        })
      }
      const prevItem = arrt[index - 1]
      if (prevItem) {
        this.activeKey = prevItem.fullPath
        this.$router.push({
          path: prevItem.fullPath,
        })
      }
      const nextItem = arrt[index + 1]
      if (nextItem) {
        this.activeKey = nextItem.fullPath
        this.$router.push({
          path: nextItem.fullPath,
        })
      }
      this.$store.commit('setpanesUrl', arrt)
      this.clearKeepAlive()
    },
    // 关闭其他
    closeOther(pane, index) {
      var arrt = JSON.parse(JSON.stringify(this.panes))
      const delIndex = index + 1
      // 删除其所有右侧元素
      arrt.splice(delIndex, arrt.length - delIndex)
      // 删除其所有左侧元素
      arrt.splice(1, index - 1)
      this.$router.push({
        path: pane.fullPath,
      })
      this.$store.commit('setpanesUrl', arrt)
      this.clearKeepAlive()
    },
    // 关闭左侧
    closeLeft(pane, index) {
      var arrt = JSON.parse(JSON.stringify(this.panes))
      arrt.splice(1, index - 1)
      this.$router.push({
        path: pane.fullPath,
      })
      this.$store.commit('setpanesUrl', arrt)
      this.clearKeepAlive()
    },
    // 关闭右侧
    closeRight(pane, index) {
      var arrt = JSON.parse(JSON.stringify(this.panes))
      const delIndex = index + 1
      arrt.splice(delIndex, this.panes.length - delIndex)
      this.$router.push({
        path: pane.fullPath,
      })
      this.$store.commit('setpanesUrl', arrt)
      this.clearKeepAlive()
    },
    // 关闭全部
    closeAll() {
      // 删除数组全部元素->数组置空
      var arrt = JSON.parse(JSON.stringify(defaultPans))
      this.$router.push({
        path: defaultPath,
      })
      this.$store.commit('setpanesUrl', arrt)
      this.clearKeepAlive()
    },
    //keepAlive缓存
    clearKeepAlive() {
      var x = []
      this.panes.forEach((item) => {
        var name = item.fullPath.split('/')
        x.push(name[name.length - 1])
      })
      if (x.length != 1) {
        x = [...x, ...['BasicLayout', 'Layout']]
      }
      this.$store.commit('setkeepAliveArr', x)
    },
  },
}
</script>
<style scoped>
::v-deep .tabs-card .ant-card-body {
  padding: 0 !important;
}

::v-deep .ant-tabs-bar {
  margin: 0 !important;
}

::v-deep .ant-tabs {
  margin-top: 15px !important;
}
</style>